<!--
 * @Author: your name
 * @Date: 2021-08-10 10:16:21
 * @LastEditTime: 2021-11-08 15:48:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\views\feedBack\turnBug\turnBug.vue
-->
<template>
  <div class="turnBug">
    <div class="header">
      <div class="headerLeft">
        <span class="leftBtn" @click="toBefore"></span>
        <span class="leftTxt">转需求</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="SaveDemand">发布</el-button>
      </div>
    </div>
    <div class="createWrap">
      <div class="createContainer">
        <el-form
          class="turnBugForm"
          :model="turnDemandForm"
          :rules="turnDemandFormRules"
          ref="turnDemandFormRef"
          label-width="80px"
          label-position="left"
        >
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <el-form-item label="所属产品" prop="product">
                    <el-select
                      disabled
                      v-model="turnDemandForm.product"
                      class="acordProduct"
                      filterable
                      clearable
                      @change="productChange"
                    >
                      <el-option
                        v-for="(item, index) in allProductList"
                        :key="index"
                        :label="item.name"
                        :value="item.productId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="产品分支" prop="branch">
                    <el-select
                      v-model="turnDemandForm.branch"
                      class="acordBranch"
                      filterable
                      clearable
                      disabled
                      placeholder="请选择产品分支"
                    >
                      <el-option :value="0" label="全部分支"></el-option>

                      <el-option
                        v-for="(item, index) in ProductBranchList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块" prop="module">
                <el-select
                  class="userSelect"
                  v-model="turnDemandForm.module"
                  placeholder="请选择所属模块"
                  filterable
                  clearable
                  @change="mouleChange"
                >
                  <el-option
                    v-for="(item, index) in ModuleList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属计划" class="ProductionName" prop="plan">
                <el-select
                  class="userSelect"
                  v-model="turnDemandForm.plan"
                  filterable
                  clearable
                  placeholder="请选择所属计划"
                >
                  <el-option
                    v-for="(item, index) in ListProductPlan"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <el-form-item label="需求来源" class="Marketing" prop="source">
                    <el-select
                      class="acordProduct"
                      v-model="turnDemandForm.source"
                      filterable
                      clearable
                      placeholder="请选择需求来源"
                    >
                      <el-option
                        v-for="(item, index) in SourceList"
                        :key="index"
                        :label="item.valueName"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="来源备注" prop="sourceNote">
                    <el-input v-model="turnDemandForm.sourceNote" class="acordBranch"> </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="由谁评审" class="Marketing" prop="assignedto">
                <el-select
                  class="userSelect"
                  v-model="turnDemandForm.assignedto"
                  filterable
                  clearable
                  placeholder="请选择由谁评审"
                >
                  <el-option
                    v-for="(item, index) in ModuleUserList"
                    :key="index"
                    :label="item.realname"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="7">
                  <el-form-item class="isDing" label="是否定制" prop="customFlag">
                    <el-select class="userSelect" v-model="turnDemandForm.customFlag" filterable clearable>
                      <el-option
                        v-for="(item, index) in customFlagList"
                        :key="index"
                        :label="item.valueName"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="17">
                  <el-form-item label="定制说明" prop="customNote" class="userSelect">
                    <el-input v-model="turnDemandForm.customNote"> </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="height: 40px">
              <el-form-item label="需求备注" prop="remark" class="userSelect">
                <el-input v-model="turnDemandForm.remark" class="demandRemark"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="height: 40px">
              <el-row>
                <el-col :span="16">
                  <el-form-item label="需求名称" class="Marketing" prop="title">
                    <el-input class="demandName" v-model="turnDemandForm.title"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="优先级" class="MarketingPri" prop="pri">
                    <el-select
                      v-model="turnDemandForm.pri"
                      placeholder=""
                      class="select_placehorlder"
                      filterable
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in PriList"
                        :key="index"
                        :label="item.valueName"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="预计" class="Marketings" prop="estimate">
                    <el-input class="userInput" oninput="value=value.replace(/[^\d]/g,'')" placeholder="小时" v-model="turnDemandForm.estimate"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="需求描述" class="questionDesc" prop="spec">
                <!-- 需求描述绑定上传 -->
                <el-upload
                  class="avatar-uploader requireDescQuill-img"
                  :action="fileUpload"
                  :on-change="requireDescImgSaveToUrl"
                  :headers="importHeaders"
                  :show-file-list="false"
                  :on-success="requireDescQuillImgSuccess"
                  :on-error="requireDescUploadError"
                  :before-upload="requireDescQuillImgBefore"
                  accept=".jpg,.jpeg,.png,.gif"
                ></el-upload>
                <div class="isShowError" style="width: 100%">
                  <quill-editor
                    v-model="turnDemandForm.spec"
                    ref="requireDescQuillEditor"
                    :options="requireDescEditorOption"
                  >
                  </quill-editor>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="验收标准" class="questionDesc" prop="verify">
                <!-- 验收标准绑定上传 -->
                <el-upload
                  class="avatar-uploader sourceNoteQuill-img"
                  :action="fileUpload"
                  :on-change="sourceNoteImgSaveToUrl"
                  :headers="importHeaders"
                  :show-file-list="false"
                  :on-success="sourceNoteQuillImgSuccess"
                  :on-error="sourceNoteUploadError"
                  :before-upload="sourceNoteQuillImgBefore"
                  accept=".jpg,.jpeg,.png,.gif"
                ></el-upload>
                <div class="isShowError" style="width: 100%">
                  <quill-editor
                    v-model="turnDemandForm.verify"
                    ref="sourceNoteQuillEditor"
                    :options="sourceNoteEditorOption"
                  >
                  </quill-editor>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抄送给" class="Marketing" prop="mailto">
                <el-select
                  class="userSelect"
                  v-model="turnDemandForm.mailto"
                  filterable
                  clearable
                  multiple
                  placeholder="请选择抄送人"
                >
                  <el-option
                    v-for="(item, index) in zenTaoUserList"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="紧急程度" class="Marketing" prop="keywords">
                <el-select
                  class="userSelect"
                  v-model="turnDemandForm.keywords"
                  placeholder="请选择紧急程度"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in UrgentList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="height: 65px">
              <el-form-item label="添加附件" class="uploadFiles">
                <br />
                <el-upload
                  class="upload-demo"
                  :action="fileUpload"
                  :on-success="onFileSuccess"
                  :on-error="onFileError"
                  :on-remove="onFileRemove"
                  :headers="importHeaders"
                  :file-list="demandFileUploadList"
                  multiple
                  :limit="3"
                >
                  <el-button size="small" type="primary" class="loadFile">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { FeedBack } from '@/api/feedBack/server'
// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['link', 'image'] // 链接、图片、视频
]
export default {
    name: '',
    components: {},
    data() {
        return {
            // 本地路径
            localFile: {},
            // 本地图片
            loadImageNow: '',

            /* 得到token */
            importHeaders: { token: JSON.parse(sessionStorage.getItem('USERINFO')).token },

            /* 禅道 产品的type类型 */
            productType: '',
            productName: '',
            /* 登录用户信息 */
            userInfo: {},

            turnDemandForm: {
                product: '',
                module: '',
                attachFileIds: [],
                editorFileIds: [],
                branch: 0,
                plan: '',
                source: '',
                assignedto: '',
                sourceNote: '',
                customFlag: '否',
                openedby: '35965',
                customNote: '',
                remark: '',
                title: '',
                pri: '',
                estimate: '',
                spec: '',
                verify: '',
                mailto: '',
                keywords: '',
                feedbackId: '',
                feedbackUrl: `${process.env.VUE_APP_BASE_API}` // 上传路径
            },
            /*
      //反馈Id
private String feedBackId;

//由谁评审
private String assignedto;

//附件Id资源列表
private Integer[] attachFileIds;

//产品分支
private Integer branch;

//是否定制化
private String customFlag;

//定制化说明
private String customNote;

//文本编辑器资源列表
private Integer[] editorFileIds;

//预计
private Integer estimate;

//紧急程度
private String keywords;

//抄送给
private String mailto;

//所属模块
private Integer module;

//创建人
private String openedby;

//所属计划
private String plan;

//优先级
private String pri;

//所属产品
private Integer product;

//需求备注
private String remark;

//需求来源
private String source;

//来源备注
private String sourceNote;

//需求描述
private String spec;

//需求名称
private String title;

//验收标准
private String verify;
    */

            /* 转需求验证规则  */
            turnDemandFormRules: {
                product: [{ required: false, message: '', trigger: 'change' }],
                module: [{ required: true, message: '', trigger: 'change' }],
                assignedto: [{ required: true, message: '', trigger: 'change' }],
                title: [{ required: true, message: '', trigger: 'change' }],
                branch: [{ required: false, message: '', trigger: 'change' }],
                keywords: [{ required: true, message: '', trigger: 'change' }],
                spec: [{ required: true, message: '', trigger: 'blur' }],
                pri: [{ required: true, message: '', trigger: 'blur' }]
            },

            /* 禅道 */
            allProductList: [],
            // 禅道定制化
            customFlagList: [],
            // 禅道用户列表
            zenTaoUserList: [],
            // 人员列表
            userList: [],
            // 禅道 由谁评审
            ModuleUserList: [],
            // 禅道  产品分支
            ProductBranchList: [],
            // 产品详情
            productInfo: {},
            // 禅道计划
            ListProductPlan: [],
            // 禅道模块
            ModuleList: [],
            // 优先级
            PriList: [],
            // 禅道来源
            SourceList: [],
            // 紧急程度
            UrgentList: [],
            // 禅道 产品关联项目
            ProjectList: [],
            // 附件文件上传列表
            demandFileUploadList: [],
            // 禅道 文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/zentao/file/upload`,

            // 富文本编辑器
            sourceNoteEditorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.sourceNoteQuill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            },

            // 需求描述
            requireDescEditorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.requireDescQuill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    props: {},
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.GetProductInfo().then(() => {
            this.GetUserList() // 人员信息
            this.GetAllProductAsync().then(() => {
                this.GetModuleList() // 禅道模块
                this.GetProjectList() // 产品关联项目
                this.GetListProductPlan() // 禅道计划
            }) // 所有产品信息
            this.GetCustomFlagList() // 禅道定制化
            this.GetPriList() // 优先级
            this.GetSourceList() // 需求来源
            this.GetUrgentList() // 紧急程度
            this.getuserId()
            this.GetListAllUser()
        })
    },
    methods: {
    /**
     * @description: 返回至上一个页面
     */
        toBefore() {
            this.$router.go(-1)
        },

        /* 获取当前用户信息 */
        async getuserId() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    // console.log('获取当前账号信息', result.data)
                    this.userInfo = result.data
                    this.turnDemandForm.openedby = result.data.id
                    this.turnDemandForm.feedbackId = this.$route.query.feedbackId
                    // console.log(this.turnDemandForm.feedbackId)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 获取所有产品信息 */
        async GetAllProductAsync() {
            try {
                const result = await FeedBack.GetAllProductAsync()
                if (result.success) {
                    // console.log('所有产品信息', result.data)
                    this.allProductList = result.data
                    this.allProductList.forEach(item => {
                        if (item.selected == true) {
                            this.turnDemandForm.product = item.productId
                            this.GetProductBranchList(this.turnDemandForm.product)
                        }
                    })
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 产品改变 */
        productChange(_val) {
            this.turnDemandForm.plan = ''
            this.ListProductPlan = []
            this.turnDemandForm.branch = 0
            this.ProductBranchList = []
            this.turnDemandForm.module = ''
            this.ModuleList = []
            this.ProjectList = []
            this.turnDemandForm.assignedto = ''
            this.ModuleUserList = []
            /* 反查产品类型 */
            this.allProductList.forEach(item => {
                if (item.productId == _val) {
                    this.productType = item.type
                }
            })
            /* 重新请求值 */
            this.GetListProductPlan()
            this.GetModuleList() // 禅道模块
            this.GetProjectList()

            if (this.productType !== 'normal') {
                // 获取产品分支
                this.GetProductBranchList(_val)
            }
        },

        /* 获得表单数据 */
        getForm() {
            this.$emit('func', this.turnDemandForm)
        },

        /* 禅道定制化 */
        async GetCustomFlagList() {
            try {
                const result = await FeedBack.GetCustomFlagList()
                if (result.success) {
                    this.customFlagList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 用户列表 */
        async GetListAllUser() {
            try {
                const result = await FeedBack.GetListAllUser()
                if (result.success) {
                    this.zenTaoUserList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 所属计划 */

        /* 根据产品ID  获得人员列表*/

        async GetUserList() {
            try {
                const result = await FeedBack.GetListItemAsync({
                    id: this.$route.query.productId
                })
                if (result.success) {
                    this.userList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 根据产品ID 获取产品详情 */
        async GetProductInfo() {
            try {
                const result = await FeedBack.GetProductInfo({
                    productId: this.$route.query.productId
                })
                if (result.success) {
                    this.productInfo = result.data
                    this.productName = this.productInfo.name
                    // console.log(result.data)
                    // this.turnDemandForm.product = result.data.productId

                    /* 获取产品类型 */
                    this.productType = result.data.type
                    /*
            判断产品信息的type类型，判断是否有分支
            branch
            normal  ------------ 没有分支
            platform
          */
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 计划 */
        async GetListProductPlan() {
            try {
                const result = await FeedBack.GetListProductPlan({
                    productId: this.turnDemandForm.product
                })
                if (result.success) {
                    this.ListProductPlan = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 模块 */
        async GetModuleList() {
            try {
                const result = await FeedBack.GetModuleList({
                    productId: this.turnDemandForm.product
                })
                if (result.success) {
                    this.ModuleList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 优先级 */
        async GetPriList() {
            try {
                const result = await FeedBack.GetPriList()
                if (result.success) {
                    this.PriList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 需求来源 */

        async GetSourceList() {
            try {
                const result = await FeedBack.GetSourceList()
                if (result.success) {
                    this.SourceList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 紧急程度 */

        async GetUrgentList() {
            try {
                const result = await FeedBack.GetUrgentList()
                if (result.success) {
                    this.UrgentList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 产品关联项目 */
        async GetProjectList() {
            try {
                const result = await FeedBack.GetProjectList({
                    productId: this.turnDemandForm.product
                })
                if (result.success) {
                    this.ProjectList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 禅道 产品分支 */
        async GetProductBranchList(_id) {
            try {
                const result = await FeedBack.GetProductBranchList({ productId: _id })
                if (result.success) {
                    this.ProductBranchList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 在模块改变的时候 查询由谁评审人员列表  */
        mouleChange(_val) {
            this.GetModuleUserList(this.turnDemandForm.product, _val)
        },

        /* 禅道由谁评审 */
        async GetModuleUserList(product, mid) {
            const objparams = {
                productId: product,
                moduleId: mid
            }
            try {
                const result = await FeedBack.GetModuleUserList(objparams)
                if (result.success) {
                    this.ModuleUserList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 文件上传 */

        // 文件上传成功钩子
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.errcode == '0') {
                this.demandFileUploadList.push({
                    url: _response.data,
                    name: _response.data.title + '.' + _response.data.extension
                })
                // TODO: 文件上传成功提示
                this.$message.success('文件上传成功')
                this.turnDemandForm.attachFileIds.push(_response.data.id)
            } else {
                this.$message.error(_response.message || '上传失败')
            }
        },

        // 文件上传失败钩子
        onFileError() {},

        // 文件移动钩子
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
            this.demandFileUploadList = _fileList
        },

        /* 确认转需求  */
        SaveDemand() {
            this.$refs['turnDemandFormRef'].validate(valid => {
                if (valid) {
                    this.turnDemand()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        async turnDemand() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.turnDemandForm.feedbackUrl += `Details?feedBackId=${this.$route.query.feedbackId}`
            const amrStr = this.turnDemandForm.mailto.toString()
            this.turnDemandForm.mailto = amrStr
            try {
                const result = await FeedBack.ChangeStory(this.turnDemandForm)
                if (result.success) {
                    loading.close()
                    // console.log('-----------', result.data)
                    this.demandFileUploadList = []
                    this.$router.go(-1)
                    // localStorage.setItem('fir', '转需求')
                } else {
                    this.$message.error(result.message)
                    loading.close()
                }
            } catch (err) {
                console.log(err)
            }
        },

        /* 富文本上传图片 */

        /* 来源备注方法----开始 */

        // 选取图片后自动回调，里面可以获取到文件
        sourceNoteImgSaveToUrl(file) {
            this.localFile = file.raw
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile)
            reader.onload = () => {
                // console.log(reader.result)
                this.loadImageNow = reader.result
            }
        },
        sourceNoteQuillImgSuccess(res) {
            // 如果上传成功
            // 获取富文本组件实例
            const quill = this.$refs.sourceNoteQuillEditor.quill
            if (res.errcode == '0') {
                // TODO: 文件上传成功提示
                this.$message.success('文件上传成功')
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', res.data.imgUrl)
                // 调整光标到最后
                quill.setSelection(length + 1)
                this.turnDemandForm.editorFileIds.push(res.data.id)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        // 富文本图片上传失败
        sourceNoteUploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        // 富文本图片上传前
        sourceNoteQuillImgBefore(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /* 来源备注方法----结束 */

        /* 需求描述方法----开始 */
        // 选取图片后自动回调，里面可以获取到文件
        requireDescImgSaveToUrl(file) {
            this.localFile = file.raw
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile)
            reader.onload = () => {
                // console.log(reader.result)
                this.loadImageNow = reader.result
            }
        },
        requireDescQuillImgSuccess(res) {
            // 如果上传成功
            // 获取富文本组件实例
            const quill = this.$refs.requireDescQuillEditor.quill
            if (res.errcode == '0') {
                // TODO: 文件上传成功提示
                this.$message.success('文件上传成功')
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', res.data.imgUrl)
                // 调整光标到最后
                quill.setSelection(length + 1)
                this.turnDemandForm.editorFileIds.push(res.data.id)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        // 富文本图片上传失败
        requireDescUploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        // 富文本图片上传前
        requireDescQuillImgBefore(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        }

    /* 需求描述方法----结束 */
    }
}
</script>

<style scoped lang="less" src="./turnDemand.less"></style>
<style scoped>
::v-deep .ql-editor li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
  content: '\2022';
}

::v-deep .ql-editor ul > li::marker {
  content: '';
  display: none;
}

::v-deep .ql-editor li:before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
</style>
